<template>
  <div class="teach-manage">
    <!-- 左侧功能入口区 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h3>教学管理</h3>
      </div>
      <div class="sidebar-menu">
        <div 
          class="menu-item"
          :class="{ active: activeMenu === 'teachInfo' }"
          @click="switchMenu('teachInfo')"
        >
          教学信息
        </div>
        <div class="menu-category">成员权限</div>
        <div 
          class="menu-item"
          :class="{ active: activeMenu === 'schoolLeader' }"
          @click="switchMenu('schoolLeader')"
        >
          学校领导
        </div>
        <div 
          class="menu-item"
          :class="{ active: activeMenu === 'subjectMaster' }"
          @click="switchMenu('subjectMaster')"
        >
          年级科目负责人
        </div>
        <div 
          class="menu-item"
          :class="{ active: activeMenu === 'examAdmin' }"
          @click="switchMenu('examAdmin')"
        >
          考试管理员
        </div>
      </div>
    </div>
    
    <!-- 右侧内容区 -->
    <div class="content">
      <TeachInfoPage v-if="activeMenu === 'teachInfo'" :key="updateMsg" />
      <UserRights 
        v-if="activeMenu === 'schoolLeader' || activeMenu === 'subjectMaster' || activeMenu === 'examAdmin'" 
        :key="updateMsg + activeMenu" 
        :defaultNav="rightsTypeMap[activeMenu]"
      />
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex';
import TeachInfoPage from '@/views/TeachInfoPage.vue';
import UserRights from '@/views/rightsManage/UserRights.vue';

export default {
  name: 'TeachManage',
  components: {
    TeachInfoPage,
    UserRights
  },
  data() {
    return {
      updateMsg: 0,
      activeMenu: 'teachInfo',
      currentComponent: 'TeachInfoPage',
      // 权限类型映射
      rightsTypeMap: {
        schoolLeader: { label: '学校领导', component: 'SchoolMaster', level: 2 },
        subjectMaster: { label: '年级科目负责人', component: 'SubjectMaster', level: 3 },
        examAdmin: { label: '考试管理员', component: 'ExamMaster', level: 4 }
      }
    }
  },
  computed: {
    ...mapState('school', ['currentSchoolId']),
    schoolId() {
      return this.currentSchoolId;
    }
  },
  watch: {
    currentSchoolId: {
      handler(newVal) {
        if (newVal) {
          this.updateMsg++;
        }
      },
      immediate: true
    }
  },
  methods: {
    ...mapActions('school', ['GET_SCHOOL_LIST', 'GET_SCHOOL_OPTIONS']),
    async initData() {
      await this.GET_SCHOOL_LIST();
      if (this.currentSchoolId) {
        await this.GET_SCHOOL_OPTIONS({
          school_id: this.currentSchoolId
        });
      }
    },
    switchMenu(menu) {
      this.activeMenu = menu;
      
      if (menu === 'teachInfo') {
        this.currentComponent = 'TeachInfoPage';
      } else if (['schoolLeader', 'subjectMaster', 'examAdmin'].includes(menu)) {
        this.currentComponent = 'UserRights';
      }
      
      this.updateMsg++;
    }
  },
  created() {
    this.initData();
  }
}
</script>

<style lang="less" scoped>
.teach-manage {
  width: 100%;
  height: 100%;
  display: flex;
  
  .sidebar {
    width: 200px;
    height: 100%;
    background-color: #fff;
    border-right: 1px solid #eee;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    
    .sidebar-header {
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 20px;
      border-bottom: 1px solid #eee;
      
      h3 {
        font-size: 16px;
        font-weight: bold;
        color: #333;
        margin: 0;
      }
    }
    
    .sidebar-menu {
      flex: 1;
      padding: 20px 0;
      
      .menu-category {
        padding: 10px 20px;
        font-size: 12px;
        color: #909399;
        margin-top: 15px;
        font-weight: bold;
        position: relative;
        
        &:after {
          content: '';
          position: absolute;
          left: 20px;
          right: 20px;
          bottom: 5px;
          height: 1px;
          background-color: #f0f2f5;
        }
      }
      
      .menu-item {
        height: 40px;
        line-height: 40px;
        padding: 0 20px;
        cursor: pointer;
        font-size: 14px;
        color: #666;
        
        &:hover {
          background-color: #f5f5f5;
        }
        
        &.active {
          background-color: #e6f7f1;
          color: #4cd4a7;
          font-weight: bold;
        }
      }
    }
  }
  
  .content {
    flex: 1;
    height: 100%;
    overflow: auto;
    background-color: #fff;
    
    // 覆盖UserRights组件内部样式
    :deep(.user-rights) {
      width: 100%;
      height: 100%;
      
      .header {
        padding: 15px 20px;
      }
    }
  }
}
</style> 